{% extends "base.html" %}

{% block title %}工具箱 - 文本大小写转换{% endblock %}

{% block content %}
    <!-- 页面标题 -->
    <div class="bg-blue-600 text-white py-8">
        <div class="container mx-auto px-4">
            <div class="flex items-center justify-between">
                <div>
                    <h1 class="text-3xl font-bold">文本大小写转换</h1>
                    <p class="mt-2">快速转换文本的大小写格式，支持多种转换模式</p>
                </div>
                <div class="bg-white bg-opacity-20 p-4 rounded-lg hidden md:block">
                    <div class="flex space-x-2 text-sm">
                        <a href="{{ url_for('main.index') }}" class="hover:underline">首页</a>
                        <span>/</span>
                        <a href="{{ url_for('text_tools.index') }}" class="hover:underline">文本工具</a>
                        <span>/</span>
                        <span class="font-medium">大小写转换</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 主要内容区 -->
    <div class="container mx-auto px-4 py-8">
        <div class="flex flex-col lg:flex-row gap-8">
            <!-- 侧边栏工具列表 -->
            <div class="w-full lg:w-1/4">
                <div class="bg-white rounded-lg shadow-md p-6">
                    <h2 class="text-xl font-bold mb-6 text-gray-800">文本处理工具</h2>
                    <ul class="space-y-3">
                        <li>
                            <a href="{{ url_for('text_tools.text_converter') }}" class="flex items-center text-blue-600 font-medium">
                                <div class="w-8 text-center">
                                    <i class="fas fa-text-height"></i>
                                </div>
                                <span>大小写转换</span>
                            </a>
                        </li>
                        <li>
                            <a href="{{ url_for('text_tools.text_codec') }}" class="flex items-center text-gray-600 hover:text-blue-600">
                                <div class="w-8 text-center">
                                    <i class="fas fa-lock"></i>
                                </div>
                                <span>编码/解码</span>
                            </a>
                        </li>
                        <li>
                            <a href="{{ url_for('text_tools.text_diff') }}" class="flex items-center text-gray-600 hover:text-blue-600">
                                <div class="w-8 text-center">
                                    <i class="fas fa-exchange-alt"></i>
                                </div>
                                <span>文本比较</span>
                            </a>
                        </li>
                        <li>
                            <a href="{{ url_for('text_tools.text_generator') }}" class="flex items-center text-gray-600 hover:text-blue-600">
                                <div class="w-8 text-center">
                                    <i class="fas fa-random"></i>
                                </div>
                                <span>随机文本生成</span>
                            </a>
                        </li>
                        <li>
                            <a href="{{ url_for('text_tools.text_statistics') }}" class="flex items-center text-gray-600 hover:text-blue-600">
                                <div class="w-8 text-center">
                                    <i class="fas fa-calculator"></i>
                                </div>
                                <span>文本统计分析</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            
            <!-- 主工具区域 -->
            <div class="w-full lg:w-3/4">
                <div class="bg-white rounded-lg shadow-md p-6">
                    <!-- 工具说明 -->
                    <div class="mb-6">
                        <h2 class="text-xl font-bold text-gray-800 mb-3">文本大小写转换</h2>
                        <p class="text-gray-600">
                            将输入的文本快速转换为大写、小写、首字母大写等多种格式。适用于编辑文档、处理数据、编程等多种场景。
                        </p>
                    </div>
                    
                    <!-- 转换选项 -->
                    <div class="mb-6">
                        <div class="flex flex-wrap gap-3">
                            <button type="button" data-operation="uppercase" class="convert-btn bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 font-medium">
                                转为大写
                            </button>
                            <button type="button" data-operation="lowercase" class="convert-btn bg-gray-200 text-gray-700 py-2 px-4 rounded-md hover:bg-gray-300 font-medium">
                                转为小写
                            </button>
                            <button type="button" data-operation="capitalize" class="convert-btn bg-gray-200 text-gray-700 py-2 px-4 rounded-md hover:bg-gray-300 font-medium">
                                首字母大写
                            </button>
                            <button type="button" data-operation="title" class="convert-btn bg-gray-200 text-gray-700 py-2 px-4 rounded-md hover:bg-gray-300 font-medium">
                                单词首字母大写
                            </button>
                            <button type="button" data-operation="remove_spaces" class="convert-btn bg-gray-200 text-gray-700 py-2 px-4 rounded-md hover:bg-gray-300 font-medium">
                                移除空格
                            </button>
                            <button type="button" data-operation="remove_lines" class="convert-btn bg-gray-200 text-gray-700 py-2 px-4 rounded-md hover:bg-gray-300 font-medium">
                                移除换行
                            </button>
                            <button type="button" data-operation="add_line_numbers" class="convert-btn bg-gray-200 text-gray-700 py-2 px-4 rounded-md hover:bg-gray-300 font-medium">
                                添加行号
                            </button>
                        </div>
                    </div>
                    
                    <!-- 输入区域 -->
                    <div class="mb-6 mt-6">
                        <label class="block text-gray-700 font-medium mb-2">输入文本</label>
                        <textarea 
                            id="input-text"
                            class="w-full h-40 p-4 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                            placeholder="在此输入要转换的文本..."
                        >{% if original_text %}{{ original_text }}{% else %}This is a sample text. It will be converted to uppercase. Each sentence starts with a capital letter.{% endif %}</textarea>
                        <div class="mt-2 flex justify-between text-sm">
                            <span class="text-gray-500">字符数: <span id="char-count">93</span></span>
                            <button type="button" id="clear-input" class="text-blue-600 hover:underline">清空</button>
                        </div>
                    </div>
                    
                    <!-- 输出区域 -->
                    <div class="mb-6">
                        <div class="flex justify-between mb-2">
                            <label class="block text-gray-700 font-medium">转换结果</label>
                            <div class="flex space-x-2">
                                <button id="copy-result" class="text-blue-600 hover:underline text-sm flex items-center">
                                    <i class="far fa-copy mr-1"></i> 复制
                                </button>
                                <button id="download-result" class="text-blue-600 hover:underline text-sm flex items-center">
                                    <i class="far fa-file-download mr-1"></i> 下载
                                </button>
                            </div>
                        </div>
                        <div class="w-full h-40 p-4 border border-gray-300 rounded-md bg-gray-50">
                            <pre id="result" class="whitespace-pre-wrap text-gray-800">{% if result %}{{ result }}{% else %}THIS IS A SAMPLE TEXT. IT WILL BE CONVERTED TO UPPERCASE. EACH SENTENCE STARTS WITH A CAPITAL LETTER.{% endif %}</pre>
                        </div>
                    </div>

                    <!-- 加载指示器 -->
                    <div id="loading-indicator" class="hidden">
                        <div class="flex justify-center items-center mb-4">
                            <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
                        </div>
                        <p class="text-center text-gray-600 text-sm">正在处理中...</p>
                    </div>
                    
                    <!-- 说明和帮助 -->
                    <div class="border-t border-gray-200 pt-6">
                        <h3 class="font-bold text-gray-800 mb-3">使用说明</h3>
                        <div class="text-gray-600 space-y-2">
                            <p>•&nbsp;&nbsp;转为大写：将所有字母转换为大写形式</p>
                            <p>•&nbsp;&nbsp;转为小写：将所有字母转换为小写形式</p>
                            <p>•&nbsp;&nbsp;首字母大写：将整个文本的第一个字母转换为大写</p>
                            <p>•&nbsp;&nbsp;单词首字母大写：将每个单词的首字母转换为大写</p>
                            <p>•&nbsp;&nbsp;移除空格：删除文本中的所有空格</p>
                            <p>•&nbsp;&nbsp;移除换行：将所有换行符替换为空格</p>
                            <p>•&nbsp;&nbsp;添加行号：为每一行添加行号</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block scripts %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 获取DOM元素
        const textInput = document.getElementById('input-text');
        const charCount = document.getElementById('char-count');
        const result = document.getElementById('result');
        const clearButton = document.getElementById('clear-input');
        const copyButton = document.getElementById('copy-result');
        const downloadButton = document.getElementById('download-result');
        const convertButtons = document.querySelectorAll('.convert-btn');
        const loadingIndicator = document.getElementById('loading-indicator');
        
        // 更新字符计数
        function updateCharCount() {
            charCount.textContent = textInput.value.length;
        }
        
        // 初始化字符计数
        textInput.addEventListener('input', updateCharCount);
        updateCharCount();
        
        // 清空按钮功能
        clearButton.addEventListener('click', function() {
            textInput.value = '';
            updateCharCount();
        });
        
        // 复制按钮功能
        copyButton.addEventListener('click', function() {
            const textToCopy = result.textContent;
            navigator.clipboard.writeText(textToCopy).then(function() {
                showMessage('文本已复制到剪贴板');
            }, function() {
                showMessage('复制失败，请手动复制', 'error');
            });
        });
        
        // 下载按钮功能
        downloadButton.addEventListener('click', function() {
            const textToDownload = result.textContent;
            const blob = new Blob([textToDownload], { type: 'text/plain' });
            const url = URL.createObjectURL(blob);
            
            const a = document.createElement('a');
            a.href = url;
            a.download = '转换结果.txt';
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
            
            showMessage('文件已下载');
        });
        
        // 转换功能 - 使用AJAX
        convertButtons.forEach(button => {
            button.addEventListener('click', function() {
                const operation = this.getAttribute('data-operation');
                const text = textInput.value;
                
                if (!text.trim()) {
                    showMessage('请输入要转换的文本', 'error');
                    return;
                }
                
                // 高亮当前选中的按钮
                convertButtons.forEach(btn => {
                    btn.classList.remove('bg-blue-600', 'text-white');
                    btn.classList.add('bg-gray-200', 'text-gray-700');
                });
                this.classList.remove('bg-gray-200', 'text-gray-700');
                this.classList.add('bg-blue-600', 'text-white');
                
                // 显示加载指示器
                loadingIndicator.classList.remove('hidden');
                
                // 准备发送的数据
                const formData = new FormData();
                formData.append('text', text);
                formData.append('operation', operation);
                
                // 发送AJAX请求
                fetch('{{ url_for("text_tools.text_converter_ajax") }}', {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('网络请求失败');
                    }
                    return response.json();
                })
                .then(data => {
                    // 隐藏加载指示器
                    loadingIndicator.classList.add('hidden');
                    
                    if (data.error === 0) {
                        // 更新结果
                        result.textContent = data.result;
                        showMessage('转换成功');
                    } else {
                        showMessage(data.message || '转换失败', 'error');
                    }
                })
                .catch(error => {
                    // 隐藏加载指示器
                    loadingIndicator.classList.add('hidden');
                    showMessage('请求出错: ' + error.message, 'error');
                });
            });
        });
        
        // 显示消息提示
        function showMessage(message, type = 'success') {
            const toast = document.createElement('div');
            
            toast.className = 'fixed bottom-4 right-4 px-4 py-2 rounded shadow-lg z-50 transition-opacity duration-500';
            toast.style.opacity = '0';
            
            if (type === 'error') {
                toast.classList.add('bg-red-500', 'text-white');
            } else {
                toast.classList.add('bg-green-500', 'text-white');
            }
            
            toast.textContent = message;
            
            document.body.appendChild(toast);
            
            // 淡入效果
            setTimeout(() => {
                toast.style.opacity = '1';
            }, 10);
            
            // 3秒后淡出并移除
            setTimeout(() => {
                toast.style.opacity = '0';
                setTimeout(() => {
                    document.body.removeChild(toast);
                }, 500);
            }, 3000);
        }
    });
</script>
{% endblock %} 